import React from 'react'
import { inject, observer } from 'mobx-react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import formatDate from 'dateformat'

import Grid from '@material-ui/core/Grid'
import Paper from '@material-ui/core/Paper'
import Typography from '@material-ui/core/Typography'
import Avatar from '@material-ui/core/Avatar'
import List from '@material-ui/core/List'
import ListItemText from '@material-ui/core/ListItemText'
import ListItem from '@material-ui/core/ListItem'

import UserContainer from './user-container'
import userInfoStyle from './styles/user-info-style'

const TopicItem = (({ topic }) => {
  return (
    <ListItem>
      <Avatar src={topic.author.avatar_url} />
      <ListItemText
        primary={topic.title}
        secondary={`最新回复：${formatDate(topic.last_reply_at, 'yy-mm-dd HH:MM')}`}
      />
    </ListItem>
  )
})

TopicItem.propTypes = {
  topic: PropTypes.object.isRequired,
}

const TopicBlock = (({
  classes,
  blockTitle,
  topics,
  emptyNotice,
}) => {
  console.log('嘿嘿嘿', blockTitle, topics, emptyNotice)
  return (
    <Grid item xs={12} md={4}>
      <Paper elevation={2}>
        <Typography className={classes.partTitle}>
          <span>{blockTitle}</span>
        </Typography>
        <List>
          {
            /* eslint-disable */
            topics.length > 0 ?
              topics.map(topic => <TopicItem topic={topic} key={topic.id} />) :
              <Typography align="center">{emptyNotice}</Typography>
            /* eslint-enable */
          }
        </List>
      </Paper>
    </Grid>
  )
})

TopicBlock.propTypes = {
  classes: PropTypes.object.isRequired,
  blockTitle: PropTypes.string.isRequired,
  topics: PropTypes.array.isRequired,
  emptyNotice: PropTypes.string.isRequired,
}

const TopicBlockWithStyle = withStyles(userInfoStyle)(TopicBlock)

@inject((stores) => {
  return {
    appState: stores.appState,
    user: stores.appState.user,
  }
}) @observer
class UserInfo extends React.Component {
  componentWillMount() {
    console.log(this.props.user.isLogin && (this.props.user.info.loginname || ''))
    this.props.appState.getUserDetail()
    this.props.appState.getUserCollection()
  }

  render() {
    const classes = this.props.classes
    const topics = this.props.user.detail.recent_topics
    const replies = this.props.user.detail.recent_replies
    const collections = this.props.user.collections.list

    console.log('user：', this.props.user)

    return (
      <UserContainer>
        <div className={classes.root}>
          <Grid container spacing={16} align="stretch">
            <TopicBlockWithStyle blockTitle="最新发布的尬题" topics={topics} emptyNotice="最近不尬...木有发布话题" />
            <TopicBlockWithStyle blockTitle="新的尬复" topics={replies} emptyNotice="最近不尬...木有尬复" />
            <TopicBlockWithStyle blockTitle="收藏的尬题" topics={collections} emptyNotice="木有收藏的尬题" />
          </Grid>
        </div>
      </UserContainer>
    )
  }
}

UserInfo.wrappedComponent.propTypes = {
  appState: PropTypes.object.isRequired,
}

UserInfo.propTypes = {
  user: PropTypes.object,
  classes: PropTypes.object.isRequired,
}

export default withStyles(userInfoStyle)(UserInfo)
